<template>
  <div class="main">
    <div class="mainHead">
      <div class="pageTitle">
        <p>{{titleName}}</p>
      </div>
      <div class="pageBack">
      </div>
      <img src="ww" class="xiaomishu"/>
      <span class="xiaomishutext">小秘书</span>
      <img src="ww" class="timeBook"/>
      <span class="timeBookText">时光书屋</span>
      <img src="ww" class="backImg"/>
      <span class="backText" @click="back">退出</span>
    </div>
    <div class="colorBar">
    </div>
    <div class="mainBody">
      <div class="bodyLeft">
        <div class="leftTitle">
          <button class="leftIconOne">
            <img src="ww"/>
            <a>上一节</a>
          </button>
          <button class="leftIconTwo">
            <img src="ww"/>
            <a>下一节</a>
          </button>
          <div class="leftIconThree">
            <img src="ww"/>
            <a>收藏</a>
          </div>
        </div>
        <div class="visualScreen">
          <div v-if='showVideo' class="playWindow" v-for="(source,index) in video.sources">
            <Video v-show="index ===0" :sources="source" :options="video.options"></Video>
            <!--<Video v-if="true" :sources="video.sources" :options="video.options"></Video>-->
          </div>
          <div v-if="showAudio" class="videoBox">
            <Audio :audioList='audioList'></Audio>
          </div>
          <div v-if='showImage' class="imageLoop">
            <h1>绘本展示</h1>
            <el-carousel :interval="4000" arrow="always" height="580px">
              <el-carousel-item v-for="(item, index) in pictures" :key="item">
                <img class="picture" :src="item"/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="material">
          <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="(pic,index) in photoArg" :key ='index'><div style="background: red;height: 30px" v-bind:style="{background: index ? 'red':'blue' }"></div></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
          </swiper>


        </div>
      </div>
      <div class="bodyCenter">

      </div>
      <div class="bodyRight">

      </div>
    </div>

  </div>
</template>
<script>
  import Analytics from "@/js/analytics.js"
  import Data from "@/js/server.js"

  export default {

    data() {
      return {
        informationList: [],
        titleName: '',
        pictures: [],
        startId: '',
        video: {
          sources: [],
          options: {
            autoplay: true,
            volume: 0.6,
            poster: ''
          }
        },
        judgeFirst: true,
        atlasId: '',
        name: '',
        image: false,
        images: [],
        atlasList: [],
        audioName: '音频',
        videoList: [],
        showVideo: true,
        showAudio: false,
        showImage: false,
        pdf: false,
        Audio: false,
        Atlas: false,
        Video: false,
        manifestUrl: false,
        materialHistory: false,
        lessonTime: null,
        likeImgUrl: "../../static/image/default.svg",
        likeStatus: false,
        audioList: {
          //音频组件地址,只能传递一个,如果需要传递多个,可以自己修改源码  换成数组或者json
          url: "",
          //这个音频文件的长度,因为一般都是异步获取到音频地址才能初始化audio的,所以这个参数父传递给子合适点
          audioname: ''
        },
        comment: {
          body: ''
        },
        guide: false,
        allHide: false,
        leader: false,

        photoArg: ['1', '2'],
        notNextTick: true,
        swiperOption: {
          slidesPerGroup:5,
          slidesPerView : 5,
          direction: 'horizontal',
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          mousewheelControl: true,
          observeParents: true,

          debugger: true,
          onTransitionStart(swiper) {
            console.log(swiper)
          },
        }
      }
    },
    computed: {
      swiper: function () {
        return this.$refs.mySwiper.swiper
      },
    },
    mounted: function () {

      this.getParams()
    },
    methods: {
      getParams: function () {
        var self = this
        var id = self.$route.params.id

        var sign = id.substring(id.length - 3, id.length)
        console.log(sign)
        if (sign == 'his') {
          var lessonId = id.substring(0, id.length - 3)
          var startDateQuery = new AV.Query('LessonSnapshot');
          startDateQuery.equalTo('lessonId', lessonId)
          var endDateQuery = new AV.Query('LessonSnapshot');
          startDateQuery.equalTo('isChecked', 3);
          var query = AV.Query.and(startDateQuery, endDateQuery);
          query.find().then(function (result) {
            if (result.length == 1) {
              self.manifestUrl = result[0].toJSON().manifest_json.url //只有一个版本的json路径
            } else if (result.length > 1) {
              var version = 1
              var lesson = ''
              result.forEach(function (item) {
                if (item.attributes.version_code > version) {
                  version = item.attributes.version_code
                  lesson = item.toJSON().manifest_json.url
                }
              })
              self.manifestUrl = lesson //有版本号最大的json路径
            }
            self.getHistoryJson(self.manifestUrl) //获取json内容
          })
        } else {
          var query = new AV.Query('Lesson')
          query.get(id).then(function (todo) {
            self.titleName = todo.attributes.name
            self.name = todo.attributes.name;
            self.planId = todo.attributes.plan.id
            self.getPlan();
            this.getMaterialId()
          }, function (error) {

          })
        }
      },
      getHistoryJson: function (jsonUrl) {
        var self = this;
        self.$http.get(jsonUrl).then(function (response) {
          self.titleName = response.data.name
          self.comment.body = response.data.content
          self.name = response.data.name
          self.materialHistory = response.data.materials
          if (self.materialHistory) {
            self.getMaterialId().then(function(materialList){
              console.log(materialList)

            })
          }
        })
      },
      back: function () {
        this.$router.back(-1)
      },
      getMaterialId: function () {
        var self = this
        new Promise(resolve => {

          var id = self.$route.params.id;
          var query = new AV.Query('LessonMaterial')
          var lessonId = AV.Object.createWithoutData('Lesson', id);
          query.equalTo('lesson', lessonId);
          query.find().then(function (result) {
            result.forEach(function (item) {
              var materialId = item.attributes.material.id

              self.getMaterials(materialId)
            })
          })
        })

      },

      getMaterials(materialId){
        if(this.materialHistory){
          return new Promise(resolve => {
            resolve(this.materialHistory)
          })
        }
        return  new Promise(resolve => {
            var query = new AV.Query('Material')
            query.equalTo('objectId', materialId);
            query.find().then(function (materialList) {
              materialList.map(material=> material.toJSON())
              resolve(materialList)
            })
        })

      },
      handelMaterialList: function (materialList) {
      },


      getPlan: function () {
        var self = this;
        var planId = self.planId;
        var query = new AV.Query('LessonPlan')
        query.equalTo('objectId', planId);
        query.find().then(function (result) {
          result.forEach(function (item) {
            if (self.image == true) {
              var markdown = item.attributes.content
              self.images.forEach(function (oneImage) {
                markdown = markdown.replace(oneImage.imageObjectId, oneImage.imageUrl)
              })
              self.comment.body = markdown
            } else {
              self.comment.body = item.attributes.content
            }
          })
        })
      },
      burPoint: function (resName, resType) {
        var actionList = ['sourceOpen']
        var userId = AV.User.current().toJSON().objectId
        Analytics.openRes(resName, userId, resType)
      },
      playVideo: function (id, resName) {
        this.burPoint(resName, '视频')
        this.showVideo = true;
        this.showAudio = false;
        var self = this;
        self.video.sources = [];
        var query = new AV.Query('Material');
        query.get(id).then(function (todo) {
          var videoUrl = todo.attributes.file.attributes.url
          self.name = todo.attributes.file.attributes.name
          var video = [{src: videoUrl, type: 'video/mp4'}]
          console.log(videoUrl)
          // self.video.sources=sss
          self.video.sources.push(video)
          // self.video.sources.push({
          //   src: videoUrl,
          //   type: 'video/mp4'
          // })
          // console.log(self.video.sources)
          // self.startId=''
        }, function (error) {
          // 异常处理
        });
      },
      playAudio: function (resName) {
        this.burPoint(resName, '音频')
        this.showVideo = false;
        this.showAudio = true
      },
      playImage: function (atlasId) {
        var self = this
        self.burPoint(self.name, '绘本')
        self.imageId = atlasId;
        this.getPicture(atlasId)
        // self.$router.push({
        //   path:'/pictureLoop/'+atlasId,
        // })
      },
      playPicture: function () {
        console.log(this.informationList)
        this.showVideo = false;
        this.showAudio = false;
      },
      getPicture: function (atlasId) {
        var self = this
        var picture = [];
        var query = new AV.Query('Material');
        var todoFolder = AV.Object.createWithoutData('Material', atlasId);
        query.equalTo('parent', todoFolder);
        query.find().then(function (result) {
          result.forEach(function (item) {
            picture.push(item.attributes.file.attributes.url)
          });
          self.pictures = picture;
          self.showImage = true;
        })
      },
      checkPic: function (index, picID) {
        var self = this;
        self.popupImgFlag = true;
        self.photoArg = self.items[index].picUrl;
        this.swiper.slideTo(picID, 1000, false);    //slideTo()
        document.body.style.overflowY = "hidden";
        document.getElementById("app").style.overflowY = "hidden";
      },
    }
  }
</script>

<style scoped>
  .ss {
    position: relative;
    top: 50px;
    float: left;
    left: 30px;
  }

  .mainHead {
    position: relative;
    width: 100%;
    height: 67px;
    background-color: white;
    overflow: hidden;
  }

  .pageTitle {
    position: absolute;
    left: 51px;
    font-size: 20px;
    width: 234px;
    height: 67px;
  }

  .pageBackText {

  }

  .pageBack {
    position: relative;
    background-color: #a6c738;
    width: 84px;
    height: 32px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    top: 17px;
    left: 287px;
  }

  .xiaomishu {
    position: relative;
    left: 1290px;
    top: -10px
  }

  .xiaomishutext {
    position: relative;
    left: 1298px;
    top: -10px;
  }

  .timeBook {
    position: relative;
    left: 1320px;
    top: -10px;

  }

  .timeBookText {
    position: relative;
    left: 1328px;
    top: -10px;

  }

  .backImg {
    position: relative;
    left: 1350px;
    top: -10px;
  }

  .backText {
    position: relative;
    left: 1358px;
    top: -10px;
  }

  .mainBody {
    position: relative;
    width: 1574px;
    height: 804px;
    left: 13px;
    top: 15px;
    background-color: #a6a9ad;
  }

  .bodyLeft {
    position: relative;
    width: 972px;
    height: 100%;
    float: left;
    background-color: white;
  }

  .leftTitle {
    position: relative;
    top: 11px;
    width: 100%;
    height: 68px;
    background-color: white;
  }

  .leftIconOne {
    position: relative;
    float: left;
    left: 35px;
    top: 15px;
    width: 85px;
    height: 35px;
    text-align: center;
    font-size: 14px;
    color: white;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: #ffa245;
  }

  .leftIconOne:hover {
    background-color: #F5E1C4;
    color: #ffa245;
  }

  .leftIconTwo:hover {
    background-color: #F5E1C4;
    color: #ffa245;
  }

  .leftIconTwo {
    position: absolute;
    top: 16px;
    left: 129px;
    width: 85px;
    height: 35px;
    text-align: center;
    font-size: 14px;
    color: white;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: #ffa245;
  }

  .leftIconThree {
    position: relative;
    float: right;
    width: 77px;
    height: 33px;
    top: 19px;
    font-size: 14px;
    color: #ffa245;
  }

  .visualScreen {
    position: absolute;
    margin-top: 12px;
    left: 36px;
    width: 936px;
    height: 503px;
    background-color: white;
  }

  .bodyCenter {
    position: relative;
    width: 421px;
    height: 729px;
    float: left;
    left: 28px;
    top: 75px;
    background-color: green;
  }

  .bodyRight {
    position: relative;
    width: 153px;
    height: 100%;
    float: left;
    background-color: blue;
  }

  .material {
    position: absolute;
    top: 602px;
    left: 36px;
    width: 936px;
    height: 188px;
  }

  .main {
    font-size: 16px;
    width: 100%;
    height: 100%;
    background-color: #E9EDF3;
  }

  .videoBox {
    position: absolute;
    top: 40%;
    left: 35%;
  }

  .imageLoop {
    padding-top: 78px;
    height: 200px;
    width: 1000px;
    margin-left: 110px;
  }

  .picture {
    width: auto;
    height: 100%;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
  }

</style>
